<template>
	<div id="app">
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name: "App",
		components: {},
	};
</script>

<style>
	#app {
		height: 100%;
	}

	/** 基础通用 **/
	.mr3 {
		margin-right: 3px;
	}

	.pt5 {
		padding-top: 5px;
	}

	.pr5 {
		padding-right: 5px;
	}

	.pb5 {
		padding-bottom: 5px;
	}

	.mt5 {
		margin-top: 5px;
	}

	.mr5 {
		margin-right: 5px;
	}

	.mb5 {
		margin-bottom: 5px;
	}

	.mb8 {
		margin-bottom: 8px;
	}

	.ml5 {
		margin-left: 5px;
	}

	.mt10 {
		margin-top: 10px;
	}

	.mr10 {
		margin-right: 10px;
	}

	.mb10 {
		margin-bottom: 10px;
	}

	.ml10 {
		margin-left: 10px;
	}

	.mt20 {
		margin-top: 20px;
	}

	.mr20 {
		margin-right: 20px;
	}

	.mb20 {
		margin-bottom: 20px;
	}

	.ml20 {
		margin-left: 20px;
	}

	/*  -- flex弹性布局 -- */

	.flex {
		display: flex;
	}

	.basis-xs {
		flex-basis: 20%;
	}

	.basis-sm {
		flex-basis: 40%;
	}

	.basis-df {
		flex-basis: 50%;
	}

	.basis-lg {
		flex-basis: 60%;
	}

	.basis-xl {
		flex-basis: 80%;
	}

	.flex-sub {
		flex: 1;
	}

	.flex-twice {
		flex: 2;
	}

	.flex-treble {
		flex: 3;
	}

	.flex-direction {
		flex-direction: column;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.align-start {
		align-items: flex-start;
	}

	.align-end {
		align-items: flex-end;
	}

	.align-center {
		align-items: center;
	}

	.align-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-center {
		align-self: flex-center;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-stretch {
		align-self: stretch;
	}

	.align-stretch {
		align-items: stretch;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.text-center {
		text-align: center;
	}

	.text-left {
		text-align: left;
	}

	.text-right {
		text-align: right;
	}

	.text-bold {
		font-weight: bold;
	}
</style>